<template>
  <!-- 可滚动内容区域 -->
  <div @scroll="removeDistance" ref="scrollList" class="scroll-wrapper">
    <!-- 下拉刷新 -->
    <van-pull-refresh
      success-text="谈判成功,已刷新 !"
      loading-text="与后台努力谈判中..."
      loosing-text="该放手时就放手..."
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <!-- 上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 数据列表 -->
        <van-cell v-for="item in list" :key="item.art_id">
          <!-- 一条文章 -->
          <div class="article_item">
            <!-- 文章可点击进入详情区域 -->
            <div @click="$router.push(`/article/${item.art_id}`)">
              <h3 class="van-ellipsis">
                {{ item.title }}
              </h3>
              <div class="img_box" v-if="item.cover.type">
                <van-image
                  :class="item.cover.type === 1 ? 'w100' : 'w33'"
                  fit="cover"
                  v-for="(img, index) in item.cover.images"
                  :key="index"
                  :src="img"
                  lazy-load
                >
                  <template #loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </div>
            </div>
            <div class="info_box">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }} 评论</span>
              <span>{{ item.pubdate | relTime }}</span>
              <!-- v-if="$store.state.user.token" 登录才显示删除按钮 -->
              <!-- 点击 删除/举报功能 -->
              <!-- 点击传入本条文章的id -->
              <span
                @click="openAction(item.art_id)"
                v-if="$store.state.user.token"
                class="close"
                ><van-icon name="cross"></van-icon
              ></span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 子组件 -->
    <MoreAction
      @click="delLike"
      @del-unlike="delLike"
      v-model="isShow"
      :artId="artId"
    ></MoreAction>
  </div>
</template>

<script>
import { getArticleListApi } from '@/api/home.js'
import MoreAction from './more-action.vue'
export default {
  components: {
    MoreAction
  },
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      artId: '', // 点击 x 获取本条文章的id
      isShow: false, // 控制弹层显示隐藏
      list: [], // 数据列表
      loading: false, // 加载图标: true -> 加载, false -> 不加载
      finished: false, // 数据全部加载完提示, true -> 提示数据没有了
      refreshing: false, // 关闭刷新loading
      timestamp: Date.now(),
      scrollTop: 0
    }
  },
  activated () {
    this.scrollList()
  },
  methods: {
    // 子传父接收后, 删除不感兴趣的文章
    delLike () {
      const index = this.list.findIndex(item => item.art_id === this.artId)
      this.list.splice(index, 1)
    },
    // 点击接收本条文章的id
    openAction (artId) {
      this.artId = artId
      // console.log('列表id: ', this.artId)
      this.isShow = true
    },
    // 记录滚动位置
    removeDistance (e) {
      this.scrollTop = e.target.scrollTop
      // console.log(this.scrollTop)
    },
    scrollList () {
      this.$refs.scrollList.scrollTop = this.scrollTop
    },

    // 上拉加载
    async onLoad () {
      await this.$sleep(1000)
      // 异步更新数据
      const { data } = await getArticleListApi({
        channel_id: this.channelId,
        timestamp: this.timestamp
      })
      // console.log(data)
      // console.log('频道ID', this.channelId)
      this.list.push(...data.results)
      // console.log('当前频道下的数据列表: ', this.list)

      // 加载状态结束关闭loading
      this.loading = false
      // 关闭刷新loading
      this.refreshing = false

      // 数据全部加载完成, 给出判断
      if (!data.pre_timestamp) {
        this.finished = true
      } else {
        // 存在=》还有数据=> 把查询下一页数据的时间戳赋值给timestamp
        this.timestamp = data.pre_timestamp
      }
    },

    // 下拉刷新
    onRefresh () {
      // 清空数据列表
      if (this.refreshing) {
        this.list = []
      }
      // 重置列表的状态（列表可能加载完了（finished=true）或者没加载完）
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true

      // 刷新需要重置时间戳=>为当前时间!!!
      this.timestamp = Date.now()

      this.onLoad()
    }

  }
  // created () {
  //   console.log('this.$route', this.$route)
  //   console.log('this.$router', this.$router)
  // }
}
</script>

<style lang="less" scoped>
// 一条数据的样式
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
